<template>
    <div>
        <div class="head-project">
            <div class="title"><span>配置</span></div>
            <div style="padding-top:14px">
                <Poptip trigger="hover" title="Title" content="content">
                    <Icon type="ios-help-outline" size="16" color="#2d8cf0" style="font-weight: 800;"></Icon>
                </Poptip>
            </div>
        </div>
        <div class="db-list">
            <div>
                数据库
            </div>
            <Table :data="dataList" :columns="tableColumns" highlight-row stripe @on-selection-change="selectRows"></Table>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
          return {
              dataList:[],
              tableColumns: [
                  {
                      type: 'selection',
                      width: 60,
                      align: 'center'
                  },
                  {
                      title: '表名',
                      key: 'name'
                  },
                  {
                      title: '注释',
                      key: 'comments'
                  }
              ],
              tableNames:[]
          };
        },
        props:{
            id: {
                type: String
            }
        },
        created(){
        },
        methods:{
            initPorject(project){
                this.dataList = [];
                this.$http.post('/codegen/api/v1/datasources/tableNames', project.datasources[0]).then((res) => {
                    if (res.status === 200) {
                        for (let key in res.data.tables) {
                            this.dataList.push({
                                name: key,
                                comments: res.data.tables[key]
                            });
                        }
                    }
                });
            },
            selectRows(rows){
                this.tableNames = rows.map((item)=>{
                    return item.name;
                });
            },
            getData(){
                return {
                    tableNames: this.tableNames
                };
            },
            valData(){
                if (this.tableNames && this.tableNames.length > 0) {
                    return true;
                } else {
                    this.$Message.error('请选择需要生成接口的表名');
                    return false;
                }
            }
        }
    };
</script>

<style scoped lang="less">
    .head-project {
        display: flex;
        justify-content: space-between;
        .title {
            width: 120px;
            padding: 6px 0;
            border-bottom: 1px solid #2d8cf0;
            span {
                font-size: 18px;
                font-weight: bold;
            }
        }
        border-bottom: 1px solid #e9eaec;
        margin: 16px 0;
    }
    .db-list{

        &>div{
            margin-bottom: 16px;
        }

        .db-title{
            display: flex;
            align-items: center;

            button{
                width: 120px;
            }

            &>div,button{
                margin-right: 12px;
            }
        }
    }
</style>